<template>
  <section>
    <header></header>
    <div style="box-shadow: 0px 5px 10px rgba(194,194,194,.2);">
      <yd-cell-item arrow>
        <span slot="left">地区</span>
        <input slot="right" type="text" @click.stop="show1 = true" v-model="model1" readonly placeholder="请选择地区" style="padding-left: .66rem;">
      </yd-cell-item>
    </div>


    <yd-cityselect v-model="show1" :callback="result1" :items="district" title="地区" ref="cityselectDemo"></yd-cityselect>

    <div class="footer_pos">
      <div class="foot_left">
        <span>需付金额：</span><span style="color: red;font-weight: bold; ">￥{{price}}</span>
      </div>
      <div class="foot_right" @click="show3()">
        立即验证
      </div>
    </div>
    <payPart :show-wrap="iswrap" :need-param="param" :product-title="title" :product-price="price" :api-logo="apilogo"></payPart>

  </section>
</template>

<script>
  import District from 'ydui-district/dist/jd_province_city_area_id';
  import payPart from '@/components/api/pay_part';
  export default {
    name: "logisticsArea",
    data(){
      return{
        show1: false,
        model1: '',
        district: District,
        price:'',
        param:{},
        iswrap:false,
        title:'物流园查询',
        apilogo:'',
        startid:'',
        province:'',
        city:'',
        area:'',
        id:'',
      }
    },
    methods: {
      result1(ret) {
        if(ret.itemName3 == '不限'){
          ret.itemName3 = '';
        }
        this.province = ret.itemName1;
        this.city = ret.itemName2;
        this.area = ret.itemName3;
        this.model1 = ret.itemName1 + ' ' + ret.itemName2 + ' ' + ret.itemName3;
        this.startid = ret.itemValue3;
        this.id = ret.itemValue3;
      },
      show3(){
        const that = this;
        if(this.model1 == ''){
          this.$dialog.notify({
            mes: '请选择地区',
            timeout: 1500,
          });
          return;
        }
        let redirectUrl = this.$route.path;
        this.$ajax.post(window.g.apiUrl+'/user/isLog.do')
          .then((response)=> {
            if (response.data.code != 200) {
              this.$dialog.notify({
                mes: '您还未登录，将为您跳转到登录页面',
                timeout: 3000,
                callback: () => {
                  let obj = {};
                  obj.province = that.province;
                  obj.city = that.city;
                  obj.area = that.area;
                  obj.url = redirectUrl;
                  sessionStorage.setItem('redirectUrl',JSON.stringify(obj));
                  that.$router.push('/login');
                }
              });
            } else {
              that.param.startid = that.startid;
              that.param.pid = '15';
              that.iswrap = !that.iswrap;
            }
          }).catch(()=>{
        })

      }
    },
    components:{
      payPart
    },
    created(){
      let that = this;
      let redirectUrl = JSON.parse(sessionStorage.getItem('redirectUrl'));
      if(redirectUrl != null){
        this.model1 = redirectUrl.province + ' ' + redirectUrl.city + ' ' + redirectUrl.area;
        this.startid = redirectUrl.id;
        sessionStorage.removeItem('redirectUrl');
      }
      this.$ajax.post(window.g.apiUrl+'/alipay/getProduct.do',JSON.stringify({
        type:'B',
      })).then((response)=>{
        if(response.data.code == 200){
          let arr = response.data.data;
          for(var i = 0;i<arr.length;i++){
            if(arr[i].id == '15'){
              that.price = arr[i].price;
              that.apilogo = arr[i].iconurl;
            }
          }
        }else{
          that.$dialog.notify({
            mes: '信息获取超时，请稍后重试',
            timeout: 1500,
          });
        }

      }).catch(()=>{
      })
    },
    beforeRouteEnter(to,from,next){
      if(from.path != '/loginback'){
        sessionStorage.removeItem('redirectUrl');
      }
      next();
    }
  }
</script>

<style scoped>
  header {
    width: 100%;
    height: 1.9rem;
    background-image: url("../../assets/api/logistics_bg.png");
    background-size: 100% 100%;
  }
  .footer_pos {
    width: 100%;
    height: 1rem;
    background: #F5F5F5;
    position: fixed;
    bottom: 0;
    display: flex;
  }

  .foot_left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
  }

  .foot_right {
    width: 2.5rem;
    height: 1rem;
    background: #E72A26;
    color: #fff;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
